<!DOCTYPE html>
<html>
<head>
    <title>崔涣的第一个HTML5文件</title>
    <style>
        header {
            height: 150px;
            background: #ABCDEF
        }

        nav {
            height: 30px;
            background: #FF9900;
            margin-top: 100px;
        }

        nav ul li {
            width: 100px;
            height: 30px;
            float: left;
            line-height: 30px;
        }

        div {
            margin-top: 10px;
            height: 700px;
        }

        section {
            height: 700px;
            background: #ABCDEF;
            width: 70%;
            float: left;
        }

        article {
            background: #a37dff;
            width: 700px;
            margin: 0 auto;
            text-align: center;
        }

        aside {
            height: 700px;
            background: #ABCDEF;
            width: 29%;
            float: right;
            text-align: center;

        }

        footer {
            height: 100px;
            background: #ABCDEF;
            clear: both;
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<!--头部区域-->
<header>
    <h1>这是的一个header标签</h1>
    <!--导航标签-->
    <nav>
        <ul>
            <li>首页</li>
            <li>二页</li>
            <li>三页</li>
            <li>苹果</li>
            <li>橘子</li>

        </ul>
    </nav>
</header>

<!--主题区域-->
<div>
    <section>
        <p>这是的一个section标签</p>

        <article>
            <h2>崔小涣之歌</h2>

            <p>崔小涣好帅，石小静好丑。</p>

            <p>崔小涣好帅，石小静好丑。</p>

            <p>崔小涣好帅，石小静好丑。</p>

            <p>崔小涣好帅，石小静好丑。</p>
            </br>
        </article>
        <article>
            <h2>石小静之歌</h2>

            <p>石小静好美，崔小涣好丑。</p>

            <p>石小静好美，崔小涣好丑。</p>

            <p>石小静好美，崔小涣好丑。</p>

            <p>石小静好美，崔小涣好丑。</p>
            </br>

        </article>
        <hr/>
        <figure>
            <figcaption>UFO</figcaption>
            <p>不明飞行物</p>
        </figure>
        <dialog>
            <dt>唐僧：悟空，你又调皮了，观音姐姐的月关宝盒怎么能乱扔呢？</dt>
            <dd>悟空：。。。（看着）</dd>
            <dt>唐僧：这样子乱扔是不对的，砸到小朋友怎么办，就算不砸到小朋友，砸到花花草草也不好</dt>
            <dd>悟空：。。。（纠结）</dd>
        </dialog>

    </section>
    <aside>
        <p>这是石小静的一个section标签</p>
        <hgroup>
            <h3> 这是一个h3标签</h3>

            <h3> 这是又一个h3标签</h3>

            <h3> 这是又一个h3标签</h3>

            <h3> 这是又一个h3标签</h3>

            <h3> 这是又一个h3标签</h3>
        </hgroup>
    </aside>
</div>

<!--底部区域-->
<footer>
    <p>这是石小静的一个section标签</p>
    <hr/>
    <small>版权所有：石小静</small>
    <small>联系我们：石小静</small>
    <small>友情链接：石小静</small>
</footer>
</body>
</html>